<template>
    <div>
    <div class="mainBox" >
        <!-- <div class="tab">
            <div class="item"  v-for="(tab,index) in childTabs" :key="index">{{ tab }}</div>
         
        </div>
         <div class="mainCon">
             <div class="lists"  >
                  <div class="item" v-for="(item,index) in childLists" :key="index">
                     
                          <div class="img">
                              <img :src="item.img" alt=""  >
                          </div>
                    
                      <div class="text"  >
                          <div class="t1">{{ item.t1 }}</div>
                          <div class="t2">{{ item.t2 }}<span>&nbsp;</span>{{ item.t3 }}</div>
                      </div>
                  </div>
         
             </div>
         </div>  -->
         <slot name="mainBoxTabs" :childName="tabs"></slot>
         <slot name="mainBoxLists" :childName="lists"></slot>

    </div>
 </div>
</template>
<script>
export default {
    // props:[ 'childTabs','childLists'],
    data(){
        return{
              tabs: [
        "不限",
        "孩子们的欢乐趴",
        "主题个性创意",
        "现代时尚艺术",
        "户外田园森系",
        "永恒经典浪漫",
        "唯美公主童话"
      ],

      lists: [
        {
          img: require("../assets/images/site_1.png"),

          t1: "如歌",
          t2: "如梦繁华",
          t3: "缔造宫廷的华光溢彩"
        },
        {
          img: require("../assets/images/sheying.png"),

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: require("../assets/images/shexiang.png"),

          t1: "如歌  (Cantabile)",
          t2: "繁华如歌",
          t3: "缔造华丽的唯美时刻"
        },
        {
          img: require("../assets/images/caizhuang.png"),

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: require("../assets/images/siyi.png"),

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        },
        {
          img: require("../assets/images/siyi.png"),

          t1: "梦的延长线",
          t2: "私藏一份温柔",
          t3: "清澈的爱着你"
        }
      ]
            
            
            
            
        }
    }
};
</script>
<style>
.mainBox {
  width: 100%;
  height: 900px;
  background-color: #0c0c0c;
  padding-top: 90px;
}
.mainBox .tab {
  margin-left: 20%;
  display: flex;
}
.mainBox .tab .item {
  margin-right: 60px;
  font-size: 16px;
  margin-top: -80px;
  color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mainCon {
  height: 100%;
  margin: 0 60px;
  /* background-color: #fff; */
}
.mainCon .lists {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
.mainCon .item {
  height: 365px;
  background-color: #121212;
  margin-bottom: 35px;

}
.mainCon .item img {
  width: 100%;
  height: 290px;
}
.mainCon .item .text {
  margin-top: 20px;
  text-align: center;
}
.mainCon .item .text .t1 {
  font-size: 20px;
  color: #fff;
  flex-wrap: 600;
}
.mainCon .item .text .t2 {
  color: #606060;
}
</style>

